<script setup lang="ts">
import { BaseIcon } from '@pkgs/components'

const icons = [
  'carbon:arrow-left',
  'carbon:caret-left',
  'carbon:chevron-left',
  'carbon:triangle-left-outline',
  'carbon:add',
  'carbon:add-alt',
  'carbon:add-comment',
  'carbon:add-filled',
  'carbon:face-activated',
  'carbon:face-activated-add',
  'carbon:face-activated-filled',
  'carbon:face-cool',
  'carbon:face-dissatisfied',
  'carbon:face-dizzy',
]
</script>

<template>
  <ElSpace>
    <BaseIcon
      v-for="(icon, index) in icons"
      :key="index"
      :icon="icon"
    />
  </ElSpace>

  <ElSpace class="mt-24px">
    <BaseIcon
      v-for="(icon, index) in icons"
      :key="index"
      :icon="icon"
      :width="40"
      :height="40"
      color="#ea5bae"
    />
  </ElSpace>
</template>
